import { ConfigSvr } from './../../services/config';
import { Component, OnInit } from '@angular/core';
import { AppModel } from "app/models/kdsConfig";

@Component({
    selector: 'order-setup',
    styleUrls: ['./index.scss'],
    template: `
        <div class="ordersetup-container">
            <ul>
                <li *ngFor="let option of orderSetupOptions" style="display: flex;" [hidden]="!isValidOrderSetupOptionNames(option.name)">
                    <options  [option]="option"></options>
                </li>
                 <li style="display: flex;" *ngIf="isValidOrderSetupOptionNames('orderConfigCount')">
                    <div class="flex left">
                        <p class="title">每行订单数量</p>
                    </div>
                    <div class="layout-row layout-align-space-between-center operation">
                        <span class="count" [class.active]='currentCount==2'  (click)="setCount(2)">2行</span>
                        <span class="count" [class.active]='currentCount==3' (click)="setCount(3)">3行</span>
                    </div>
                </li>
            </ul>
        </div>
    `
})

export class OrderSetup implements OnInit {
    constructor(private configSvr: ConfigSvr) { }

    isValidOrderSetupOptionNames(name) {
        return this.validOrderSetupOptionNames.indexOf(name) > -1;
    }

    get validOrderSetupOptionNames(): Array<string> {
        const appModel = this.configSvr.appConfig.model;
        let options;
        switch (appModel) {
            case AppModel.FastFood:
                options = ["orderConfigNewOrderTiming", "orderConfigTimeoutTiming", "orderConfigCount"]
            case AppModel.HotPot:
                options = ["orderConfigTimeoutTiming", "orderConfigCategorized"] //"orderConfigCombined",
                break;
            default:
                break;
        }
        return options;
    }


    currentCount = this.configSvr.orderConfig.count;
    ngOnInit() {
        this.orderSetupOptions[0].onChange = (sender) => {
            const orderConfig = this.configSvr.orderConfig;
            orderConfig.newOrderTiming = sender.timing;
            this.configSvr.orderConfig = orderConfig;
            if (this.orderSetupOptions[1].timing == this.orderSetupOptions[0].timing) {
                this.orderSetupOptions[1].timing++;
                this.orderSetupOptions[1].onChange(this.orderSetupOptions[1]);
            }
        }
        this.orderSetupOptions[1].onChange = (sender) => {
            const orderConfig = this.configSvr.orderConfig;
            orderConfig.timeoutTiming = sender.timing;
            this.configSvr.orderConfig = orderConfig;
            if (this.orderSetupOptions[1].timing == this.orderSetupOptions[0].timing) {
                this.orderSetupOptions[0].timing--;
                this.orderSetupOptions[0].onChange(this.orderSetupOptions[0]);
            }
        }

        this.orderSetupOptions.find(option => option.name == "orderConfigCombined").onChange = (sender: {
            checked: boolean
        }) => {
            const orderConfig = this.configSvr.orderConfig;
            orderConfig.combined = sender.checked;
            this.configSvr.orderConfig = orderConfig;
        }
        this.orderSetupOptions.find(option => option.name == "orderConfigCategorized").onChange = (sender: {
            checked: boolean
        }) => {
            const orderConfig = this.configSvr.orderConfig;
            orderConfig.categorized = sender.checked;
            this.configSvr.orderConfig = orderConfig;
        }
    }
    setCount(count) {
        this.currentCount = count;
        const orderConfig = this.configSvr.orderConfig;
        orderConfig.count = count;
        this.configSvr.orderConfig = orderConfig;
    }
    formateTiming(minute) {
        return minute + "分钟";
    }

    orderSetupOptions = [
        {
            name: "orderConfigNewOrderTiming",
            type: "minute",
            "title": "新单时长",
            "description": "设置新订单显示的时长",
            timing: this.configSvr.orderConfig.newOrderTiming,
            increaseOperation: function () {
                const timing = this.timing;
                this.timing += 1;
                if (!this.check()) {
                    this.timing = timing;
                    return;
                }
                this.onChange(this);
            },
            min: 1,
            max: 120,
            decreaseOperation: function () {
                const timing = this.timing;
                this.timing -= 1;
                if (!this.check()) {
                    this.timing = timing;
                    return;
                }
                this.onChange(this);
            },
            check() {
                return this.timing >= this.min && (this.timing <= this.max);
            },
            onChange: function (sender) { }
        }, {
            name: "orderConfigTimeoutTiming",
            type: "minute",
            "title": "超时订单时长",
            "description": "超过该时长仍未出品的订单会以红色标记",
            timing: this.configSvr.orderConfig.timeoutTiming,
            min: 2,
            max: 600,
            increaseOperation: function () {
                const timing = this.timing;
                this.timing += 1;
                if (!this.check()) {
                    this.timing = timing;
                    return;
                }
                this.onChange(this);
            },
            decreaseOperation: function () {
                const timing = this.timing;
                this.timing -= 1;
                if (!this.check()) {
                    this.timing = timing;
                    return;
                }
                this.onChange(this);
            },
            check() {
                return this.timing >= this.min && (this.timing <= this.max);
            },
            onChange: function (sender) { }
        },
        {
            name: "orderConfigCombined",
            "title": "菜品合并显示",
            "description": "菜品合并显示",
            type: "switch",
            timing: 0,
            checked: this.configSvr.orderConfig.combined,
            operation(option) {
                this.checked = !this.checked;
                this.onChange(this);
            },
            onChange: (sender) => { }
        },
        {
            name: "orderConfigCategorized",
            "title": "菜品分类显示",
            "description": "菜品分类显示",
            type: "switch",
            timing: 0,
            checked: this.configSvr.orderConfig.categorized,
            operation(option) {
                this.checked = !this.checked;
                this.onChange(this);
            },
            onChange: (sender) => { }
        }
    ]
}